<template>
  <div ref="mapRef" class="map"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
// @ts-ignore
// import china from '@/assets/mapJson/china.json';
import china from '@/assets/mapJson/china2.json';
import { onMounted, ref, toRefs, watch } from 'vue'
const mapRef = ref<HTMLDivElement | null>();

interface Iprop {
  data: ISaleMap[];
  [index: string]: any;
}

const props = defineProps<Iprop>()

// 31.2注册地图数据 - 地图才有特殊操作
// 31.3地图需要去到 阿里云/数据可视化平台 --- 可视化学院 ---  复制 JSON API --- 去网址输入打开，然后 ctrl+A ctrl+c --- 去到 assets 文件夹里面 新建 mapJson 文件夹新建 china.json 文件，将数据存到本地
// @ts-ignore
echarts.registerMap('china', china);
let myChart: echarts.ECharts;

function setMapOption(data: any) {
  myChart.setOption(
    ({
      title: {
        text: '全国销售分布图',
        //位置居中显示
        left: 'center',
        sublink:
          'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,0.6)',
        textStyle: {
          color: '#fff'
        },
        formatter: '{b}<br/> 销量: {c}'
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      // 图例
      visualMap: {
        min: 0,
        max: 1000000,
        calculable: true,
        inRange: {
          // 修改左侧的颜色
          // color: ['lightskyblue', 'yellow', 'orangered']
          color: ['#fdc6c0', '#fcafa6', '#fb7a65', '#fd6136', '#ff4806', '#a72b2a'],
          opacity: [0.4, 1]
        },
      },
      series: [
        {
          // 修改对应鼠标移入的颜色
          itemStyle: {
            emphasis: {
              areaColor: '#8884d8f'
            }
          },
          name: '香港18区人口密度',
          type: 'map',
          // 这个map属性，要和你当初注册的名字要一样
          map: 'china',
          // label: {
          //     show: true
          // },
          data,
          emphasis: {
            // 文本标签
            label: {
              show: false
            }
          }
        }
      ]
    })
  );
}

onMounted(() => {
  if (!mapRef.value) return;
  myChart = echarts.init(mapRef.value);
  // let option: EChartsOption;
  setMapOption([])
})

const { data } = toRefs(props);
watch(data, () => {
  let newData = data.value.map((item: ISaleMap) => ({
    name: item.areaName,
    value: item.saleNum
  }))
  setMapOption(newData)
})



</script>

<style scoped lang="less">
.map {
  width: 100%;
  height: 600px;
  margin-top: 60px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
</style>